<template>
  <div class="recommend">
    <div class="recom-title">热销推荐</div>
    <ul>
        <router-link
            tag = "li"
            class="recom-item border-bottom" 
            v-for="item of list" 
            :key="item.id"
            :to="'/detail/'+item.id"
        >
            <div class="recom-item-img">
                <img class="recom-item-img-in" :src="item.imgUrl">
            </div>
            <div class="recom-item-info">
                <h2  class="recom-item-tit">
                       {{item.title}}
                </h2>
                <p class="recom-item-desc">{{item.desc}}</p>
                <button class="recom-item-btn">查看详情</button>
            </div>
        </router-link>
    </ul>
  </div>
</template>

<script type="text/javascript">
export default {
  name: 'HomeRecommend',
  props:{
      list:Array
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
    .recom-title
        height .8rem
        line-height .8rem
        background #ccc
        text-indent .2rem
    .recom-item
        overflow hidden
        display flex
        height 1.9rem
        .recom-item-img
            width 1.7rem
            height 1.7rem
            padding .1rem
            .recom-item-img-in
                width 100%
                height 100%
                object-fit cover
        .recom-item-info
            flex 1
            padding .1rem
            min-width 0
            .recom-item-tit
                font-size .28rem
                color #000
                margin-bottom .2rem
                ellipsis()
            .recom-item-desc
                font-size .24rem
                color #666
                margin-bottom .2rem
                ellipsis()
            .recom-item-btn
                background  #ff9300
                padding 0 .1rem
                border-radius .06rem
                color #fff
                float right
            
</style>
